<template>
  <Card class="page-card"
        :bordered="$props.border">
    <template v-if="computedShowHeader">
      <PageHeader v-if="needBack"
                  slot="title"
                  class="card-header"
                  :title="title"
                  :subTitle="subTitle"
                  @back="_back">
      </PageHeader>
      <PageHeader slot="title"
                  v-else
                  class="card-header"
                  :title="title"
                  :subTitle="subTitle">
      </PageHeader>
    </template>
    <template v-for="(index, name) in $slots"
              :slot="name">
      <slot :name="name" />
    </template>
  </Card>
</template>

<script>

import { Card, PageHeader, Icon } from 'ant-design-vue'
import PropTypes from '@zh/common-utils/prop-types'

export default {
  name: 'ZPageCard',
  components: { Card, PageHeader, Icon },
  props: {
    title: PropTypes.string.def(''),
    subTitle: PropTypes.string.def(''),
    border: PropTypes.bool.def(false),
    needBack: PropTypes.bool.def(false),
    back: PropTypes.func.def(null),
    showNavBar: {
      type: Boolean,
      default: undefined
    }
  },
  computed: {
    computedShowHeader () {
      if (this.showNavBar !== undefined) {
        return this.showNavBar
      }
      return process.env.VUE_APP_DISPLAY_NAVBAR !== 'false'
    }
  },
  mounted () {
    this.$emit('title', this.title, this.subTitle)
  },
  watch: {
    title () {
      this.handleTitleChange?.(this.title, this.subTitle)
    },
    subTitle () {
      this.handleTitleChange?.(this.title, this.subTitle)
    }
  },
  methods: {
    _back () {
      if (this.$props.back) {
        if (typeof this.$props.back === 'function') {
          this.$props.back()
        } else {
          console.error('PageCard.back不是一个function')
        }
      } else if (this.$router) {
        this.$router.go(-1)
      }
    }
  }
}

</script>

<style lang="less" scoped>
.page-card ::v-deep .ant-card-head-title {
  padding: 0px 0px;
}
::v-deep .ant-page-header-heading-title {
  line-height: normal;
}
</style>
